<script lang='ts' setup>
import { ref, defineProps } from 'vue';
import Menu from '@/components/admin/Menu.vue';
import Nav from '@/components/admin/Nav.vue';

</script>
<template>
  <div class="admin flex-c">
    <Nav class="nav"></Nav>
    <div class="main flex">
      <Menu class="menu"></Menu>
      <section class="section">
        <router-view v-slot="{ Component, route }">
          <transition :name="(route.meta?.transitionName as string) || 'fade'">
            <component :is="Component" />
          </transition>
        </router-view>
      </section>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.admin {
  width: 100vw;
  height: 100vh;

  @media screen and (max-width: 900px) {
    .menu {
      display: none;
    }
  }

  @media screen and (min-width: 900px) {
    .nav {
      display: none;
    }
  }

  .main {
    width: 100%;
    padding: 30px;
    flex: 1;
  }

  .section {
    flex: 1;
    height: 100%;
  }
}
</style>